import { Button as AntdButton } from 'antd';
import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
import { PlusOutlined } from '@ant-design/icons';

interface IProps {
  title?: string;
  children?: ReactNode;
  buttonTitle?: string;
  loading?: boolean;
  danger?: boolean;
  disabled?: boolean;
  style?: CSSProperties;
  onClick: MouseEventHandler<HTMLButtonElement>;
}
export function MyLoadingButton({ title, loading, danger, onClick }: IProps) {
  return (
    <AntdButton
      type='primary'
      loading={loading}
      danger={danger}
      onClick={onClick}>
      {title}
    </AntdButton>
  );
}
export function CloseButton({ onClick }: { onClick: () => void }) {
  return (
    <button
      type='button'
      className='close'>
      <span onClick={onClick}>×</span>
    </button>
  );
}
export function SmallButton({
  onClick,
  children: icon,
  disabled = false,
  variant,
}: IProps & { variant?: 'text' | 'link' | 'dashed' | 'default' | 'primary' }) {
  return (
    <AntdButton
      disabled={disabled}
      type={variant ?? 'default'}
      icon={icon}
      onClick={onClick}
    />
  );
}
export function AddButton({ onClick, style = { width: '100%' } }: IProps) {
  return (
    <AntdButton
      style={{ ...style, fontSize: '18px' }}
      type='text'
      icon={<PlusOutlined />}
      onClick={onClick}
    />
  );
}
